<template>
  <div :style="{ padding: '10px 100px 0px 100px' }">
    <div class="button-box">
      <a-popconfirm
        title="您确定要恢复所选图片么?"
        ok-text="确定"
        cancel-text="取消"
        @confirm="restoreMultiple()"
      >
        <a-button
          class="recycler-button"
          :style="{ color: '#52c41a', borderColor: '#52c41a' }"
          ><UndoOutlined />恢复所选项</a-button
        >
      </a-popconfirm>

      <a-popconfirm
        title="您确定要删除所选图片么?"
        ok-text="确定"
        cancel-text="取消"
        @confirm="destoryMultiple()"
      >
        <a-button
          class="recycler-button"
          :style="{ color: '#ff4d4f', borderColor: '#ff4d4f' }"
        >
          <DeleteOutlined /> 删除所选项
        </a-button>
      </a-popconfirm>

      <a-popconfirm
        title="您确定要清空回收站么?"
        ok-text="确定"
        cancel-text="取消"
        @confirm="clear()"
      >
        <a-button
          class="recycler-button"
          :style="{ color: '#1890ff', borderColor: '#1890ff' }"
          ><ClearOutlined />清空回收站</a-button
        >
      </a-popconfirm>

      <span style="color: grey"
        >⚠️注意：回收站的图片删除后不可恢复，请慎重考虑。</span
      >
    </div>
    <a-table
      :row-selection="rowSelection"
      :columns="columns"
      :data-source="data"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'fileLink'">
          <a-image :src="record.fileLink" :style="{ maxHeight: '60px' }" />
        </template>
        <template v-if="column.dataIndex === 'createTime'">
          <a-badge
            color="green"
            :text="formatDate(record.createTime)"
          ></a-badge>
        </template>

        <template v-if="column.key === 'operation'">
          <a-popconfirm
            title="您确定要删除该照片么?"
            ok-text="确定"
            cancel-text="取消"
            @confirm="destorySingle(record.key)"
          >
            <a-button type="link">删除</a-button>
          </a-popconfirm>
          <a-popconfirm
            title="您确定要恢复该照片么?"
            ok-text="确定"
            cancel-text="取消"
            @confirm="restoreSingle(record.key)"
          >
            <a-button type="link">恢复</a-button>
          </a-popconfirm>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  computed,
  ref,
  unref,
  reactive,
  onMounted
} from 'vue';
import { message, Table } from 'ant-design-vue';
import {
  DeleteOutlined,
  UndoOutlined,
  ClearOutlined
} from '@ant-design/icons-vue';

import {
  restoreRegenerant,
  destoryRegenerant,
  clearRecycler,
  regenerantList
} from '@/apis/recycler';
import moment from 'moment';

interface RegenerantType {
  key: string | number;
  picId: number;
  albumId: number;
  albumName: string;
  fileName: string;
  fileLink: string;
  createTime: string;
}

interface paginationType {
  pageSize: number;
  current: number;
  total: number;
}

const columns = [
  {
    title: '回收物ID',
    dataIndex: 'key',
    key: 'key'
  },
  {
    title: '图片ID',
    dataIndex: 'picId',
    key: 'picId'
  },
  {
    title: '相册ID',
    dataIndex: 'albumId',
    key: 'albumId'
  },

  {
    title: '所属相册',
    dataIndex: 'albumName',
    key: 'albumName'
  },
  {
    title: '图片',
    dataIndex: 'fileLink',
    key: 'fileLink'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation'
  }
];

export default defineComponent({
  components: {
    DeleteOutlined,
    UndoOutlined,
    ClearOutlined
  },
  setup() {
    const data = ref<RegenerantType[]>([]);
    const pagination = reactive<paginationType>({
      pageSize: 10,
      current: 1,
      total: 0
    });

    const selectedRowKeys = ref<RegenerantType['key'][]>([]); // Check here to configure the default column
    const onSelectChange = (changableRowKeys: string[]) => {
      console.log(changableRowKeys);
      selectedRowKeys.value = changableRowKeys;
    };

    const rowSelection = computed(() => {
      return {
        selectedRowKeys: unref(selectedRowKeys),
        onChange: onSelectChange,
        hideDefaultSelections: true,
        selections: [
          Table.SELECTION_ALL,
          Table.SELECTION_INVERT,
          Table.SELECTION_NONE
        ]
      };
    });

    const destory = (regenerandIds: Array<string | number>) => {
      destoryRegenerant(regenerandIds).then((res) => {
        message.success('删除照片成功');
        getRegenerantList();
      });
    };

    const restore = (regenerandIds: Array<string | number>) => {
      restoreRegenerant(regenerandIds).then((res) => {
        message.success('恢复成功');
        getRegenerantList();
      });
    };

    const clear = () => {
      if (pagination.total === 0) {
        message.warn('回收站内无照片～');
      } else {
        clearRecycler().then((res) => {
          message.success('清空回收站成功！');
          getRegenerantList();
        });
      }
    };

    const destorySingle = (regenerandId: string | number) => {
      destory([regenerandId]);
    };

    const restoreSingle = (regenerandId: string | number) => {
      restore([regenerandId]);
    };

    const destoryMultiple = () => {
      if (selectedRowKeys.value.length === 0) {
        message.warn('请选择照片再进行操作！');
      } else {
        destory(selectedRowKeys.value);
      }
    };

    const restoreMultiple = () => {
      if (selectedRowKeys.value.length === 0) {
        message.warn('请选择照片再进行操作！');
      } else {
        restore(selectedRowKeys.value);
      }
    };

    const getRegenerantList = () => {
      const { pageSize, current } = pagination;
      regenerantList(current, pageSize).then((res) => {
        const { list, total } = res.data;
        data.value = list;
        pagination.total = total;
      });
    };

    const formatDate = (date: string) => {
      return moment(date).format('YYYY-MM-DD HH:mm:ss');
    };

    onMounted(() => {
      document.onscroll = (e) => {};
    });

    return {
      data,
      columns,
      selectedRowKeys,
      rowSelection,
      getRegenerantList,
      destorySingle,
      destoryMultiple,
      restoreSingle,
      restoreMultiple,
      clear,
      formatDate
    };
  },
  created() {
    this.getRegenerantList();
  }
});
</script>

<style scoped lang="less">
.button-box {
  margin-bottom: 10px;
  .recycler-button {
    margin-right: 10px;
  }
}
</style>
